@page "/write"
@namespace SwashbucklerDiary.Rcl.Pages
@inherits ImportantComponentBase

@if (enableMarkdown && IsThisPage)
{
    <link href="@cssHref" rel="stylesheet" />
}

<div class="d-flex flex-column" style="@WrapStyle">
    <MyAppBar>
        <MButton Icon="true"
                 OnClick="NavigateToBack">
            <MIcon>
                arrow_back
            </MIcon>
        </MButton>

        <MSpacer></MSpacer>

        <CustomMButton Icon="true"
                       OnMousedownPreventDefault="true"
                       OnClick="InsertTimestamp">
            <MIcon>
                schedule
            </MIcon>
        </CustomMButton>

        <MButton Icon="true"
                 OnClick="() => showTemplate = true">
            <MIcon>
                space_dashboard
            </MIcon>
        </MButton>

        <MButton Icon="true"
                 OnClick="() => showSelectTag = true">
            <MIcon>
                label
            </MIcon>
        </MButton>

        <MultiMenu @bind-Visible="showMenu"
                   DynamicListItems="menuItems">
            <ActivatorContent>
                <MButton @attributes="@context.Attrs"
                         Icon="true">
                    <MultiDisplay>
                        <DesktopContent>
                            <MIcon>more_horiz</MIcon>
                        </DesktopContent>
                        <MobileContent>
                            <MIcon>more_vert</MIcon>
                        </MobileContent>
                    </MultiDisplay>
                </MButton>
            </ActivatorContent>
        </MultiMenu>
    </MyAppBar>

    <ScrollContainer ContentClass="d-flex flex-column pt-0 pb-sm-5"
                     ContentStyle="height:100%;">
        <div>
            <div class="d-flex align-center px-3 flex-wrap">
                @if (diaryTimeFormat?.Contains("yyyy/MM/dd") ?? false)
                {
                    <button class="d-flex align-center text-h6 font-weight-bold mr-3" @onclick="()=>showDate=true">
                        @(diary.CreateTime.ToString("yyyy/MM/dd"))
                    </button>
                }

                @if (diaryTimeFormat?.Contains("HH:mm") ?? false)
                {
                    <button class="d-flex align-center font-weight-bold mr-5" @onclick="()=>showTime=true">
                        @(diary.CreateTime.ToString("HH:mm"))
                    </button>
                }

                @if (diaryTimeFormat?.Contains("dddd") ?? false)
                {
                    <span class="text-subtitle-2">
                        @(I18n.ToWeek(diary.CreateTime))
                    </span>
                }
                
                <MSpacer></MSpacer>

                <span class="text-subtitle-2">
                    @(CounterValue())
                </span>
            </div>

            @if (showOtherInfo)
            {
                <div>
                    <DiaryInfoButton Icon="@WeatherIcon"
                                     Text="@WeatherText"
                                     OnClick="() => showWeather = true">
                    </DiaryInfoButton>

                    <DiaryInfoButton Icon="@MoodIcon"
                                     Text="@MoodText"
                                     OnClick="() => showMood = true">
                    </DiaryInfoButton>

                    <DiaryInfoButton Icon="location_on"
                                     Text="@LocationText"
                                     OnClick="() => showLocation = true">
                    </DiaryInfoButton>
                </div>
            }
        </div>

        @if (enableTitle)
        {
            <MTextField @bind-Value="diary.Title"
                        Class="pb-0 mb-sm-4 user-select font-weight-bold flex-grow-0 rounded-lg"
                        Solo="true"
                        Flat="true"
                        TValue="string"
                        BackgroundColor="transparent"
                        HideDetails="@("auto")"
                        Dense="true"
                        spellcheck="false"
                        maxlength="50"
                        Placeholder="@(I18n.T("Please enter title"))">
            </MTextField>
        }

        <div class="write-input-wrap user-select">
            @if (enableMarkdown)
            {
                <MarkdownEdit @ref="markdownEdit"
                              @bind-Value="diary.Content"
                              @bind-MobileOutline="showMoblieOutline"
                              WrapClass="write-markdown-wrap"
                              Class="px-3 rounded-lg write-markdown"
                              Autofocus="autofocus"
                              Outline="outline"
                              OnAfter="HandleAppActivation">
                </MarkdownEdit>
            }
            else
            {
                <TextareaEdit @ref="textareaEdit"
                              @bind-Value="diary.Content"
                              Class="rounded-lg"
                              Autofocus="autofocus"
                              OnAfter="HandleAppActivation">
                </TextareaEdit>
            }
        </div>

        <div class="@TagsWrapClass">
            <div class="write-chip-group" style="width:100%;">
                @foreach (var item in SelectedTags)
                {
                    <MChip @key="item.Id"
                           Outlined
                           Close
                           OnCloseClick="() => RemoveSelectedTag(item)">
                        @(item.Name)
                    </MChip>
                }
            </div>
        </div>

        @if (enableMarkdown)
        {
            <div class="vditor-toolbar-help"></div>
        }
    </ScrollContainer>
</div>

<SelectTemplateDialog @bind-Visible="showTemplate"
                      @bind-Tags="tags"
                      OnOK="UseTemplate"
                      OnAfterShowContent="() => waitSelectTemplate = false">
</SelectTemplateDialog>

<SelectTagsDialog @bind-Visible="showSelectTag"
                  @bind-Value="SelectedTags"
                  @bind-Items="tags">
</SelectTagsDialog>

<SelectWeatherDialog @bind-Visible="showWeather"
                     @bind-Value="@diary.Weather"
                     @bind-ShowText="showIconText">
</SelectWeatherDialog>

<SelectMoodDialog @bind-Visible="showMood"
                  @bind-Value="@diary.Mood"
                  @bind-ShowText="showIconText">
</SelectMoodDialog>

<SelectLocationDialog @bind-Visible="showLocation"
                      @bind-Value="diary.Location">
</SelectLocationDialog>

<MultiDatePicker @bind-Visible="showDate"
                 @bind-Value="SelectedDate">
</MultiDatePicker>

<MultiTimePicker @bind-Visible="showTime"
                 @bind-Value="SelectedTime">
</MultiTimePicker>

<SelectDiaryDialog @bind-Visible="showReference"
                   @bind-Tags="tags"
                   OnOK="InsertReferenceAsync">
</SelectDiaryDialog>

<MOverlay Value="overlay"
          Opacity="0">
</MOverlay>

@code {
    private string WrapStyle => new StyleBuilder()
        .Add("height", "100%")
        .AddIf("opacity", "0", waitSelectTemplate)
        .Build();

    private string TagsWrapClass => new CssBuilder()
        .Add("pl-2")
        .Add("d-none", SelectedTags.Count == 0)
        .ToString();
}